<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            1. 组合选择器是将所有的选择器权重加在一起计算的
            2. 权重相同时，最后那个生效，采用就近原则（离html标签近的css生效）
            3. 内联样式(html里直接写css，不在style标签里)具有最高的优先级
            4. 分组选择器的权重是分别计算的
            5. !important例外规则，将覆盖任何其他声明
        */
        .d1>p>span {
            color: red;
        }
        div .s1 {
            color: blue;
        }
        #p1, span{
            color: aquamarine;
        }
        div span {
            color: coral !important;
        }
    </style>
</head>
<body>
    <div class="d1">
        <span>1111111</span>
        <p>
            <span class="s1">222222</span> <br>
            <span style="color: green;">333333</span>
        </p>
    </div>
    <span>444444444</span>
    <p id="p1">55555555555</p>
</body>
</html>